/**
 * Created by 30947 on 2018/7/18.
 */
$(function () {

    char1();
    char2();
    char3();
    char4();
    char5();
})

//统计分析图
function char1() {

    var myChart = echarts.init($("#char1")[0]);

    var option = {
        color: [
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff",
        ],
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
            bottom: "0%",
            itemWidth: 10,
            itemHeight: 10,
            // 文字颜色
            textStyle: {
                color: "rgba(255, 255, 255, .5)",
                fontSize: "10",
            },
        },
        series: [{
            name: "进站客流占比",
            type: "pie",
            // 设置大小
            radius: ["20%", "70%"],
            // 设置图形位置
            center: ["50%", "50%"],
            roseType: "radius",
            // 图形文字
            label: {
                fontSize: 12,
            },
            // 链接图形和文字的线条
            labelLine: {
                // length 链接图形的线条
                length: 6,
                // length2链接文字的线条
                length2: 8,
            },
            data: [
                { value: 13046329, name: "1号线工作日" },
                { value: 3753961, name: "1号线周末" },
                { value: 7456696, name: "2号线工作日" },
                { value: 1885325, name: "2号线周末" },
                { value: 2549355, name: "4号线工作日" },
                { value: 617754, name: "4号线周末" },
            ],
        },],
    };
    myChart.setOption(option);
    // 监听浏览器缩放，图表对象调用缩放resize函数
    window.addEventListener("resize", function () {
        myChart.resize();
    })

}
function char2() {
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6", "#056aab", "#0686ad","#0786ad","#0886ad","#0986ad"];
    var myChart = echarts.init($("#char2")[0]);
    var option = {
        grid: {
            left: "10%",
            top: "10%",
            bottom: "10%",
            // containLabel: true,
        },
        xAxis: {
            // x轴不显示
            show: false,
        },
        yAxis: [{
            type: "category",
            // 反向坐标显示
            inverse: true,
            data: [
                '城星路站', '盈丰路站', '南星桥站', '江陵路站', '近江站', '七堡站', '古翠路站', '沈塘桥站', '武林门站', '江锦路站'
            ],
            // 不显示y轴线条
            axisLine: {
                show: false,
            },
            // 不显示刻度
            axisTick: {
                show: false,
            },
            // 设置刻度标签的文字颜色
            axisLabel: {
                color: "#fff",
            },
        },
        {
            type: "category",
            // 反向坐标显示
            inverse: true,
            data: [278576,
                 211317,
                 221466,
                 687030,
                 418520,
                 147494,
                 364901,
                 357958,
                 305103,
                 284170],
            // 不显示y轴线条
            axisLine: {
                show: false,
            },
            // 不显示刻度
            axisTick: {
                show: false,
            },
            // 设置刻度标签的文字颜色
            axisLabel: {
                color: "#fff",
            },
        },
        ],
        series: [{
            name: "条",
            type: "bar",
            data: ['89.51',
                 '84.19',
                 '83.73',
                 '83.33',
                 '83.12',
                 '82.92',
                 '82.47',
                 '82.37',
                 '82.25',
                 '82.07'],//占比-%
            yAxisIndex: 0,
            // 修改柱子的距离
            barCategoryGap: 50,
            // 柱子的宽度
            barWidth: 10,
            // 修改第一柱子的圆角
            itemStyle: {
                barBorderRadius: 20,
                // 此时的color，可以修改柱子的颜色
                color: function (params) {
                    return myColor[params.dataIndex];//dataindax:柱子索引号
                },
            },
            // 显示柱子内部的文字
            label: {
                normal: {
                    show: true,
                    // 图形内显示
                    position: "inside",
                    formatter: "{c}%",//数据值-%
                },
            },
        },
        {
            name: "框",
            // 柱子的距离
            barCategoryGap: 50,
            // 柱子的宽度
            barWidth: 15,
            type: "bar",
            data: [100, 100, 100, 100, 100, 100, 100,100,100,100],//第二个框占比百分之百
            yAxisIndex: 1,
            itemStyle: {
                color: "none",
                // 边框颜色
                borderColor: "#00c1de",
                // 边框颜色
                borderWidth: 3,
                // 圆角
                barBorderRadius: 15,
            },
        },
        ],
    };
    // 把配置给实列对象
    myChart.setOption(option);
    // 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    })

}
function char3() {
    var myChart = echarts.init($("#char3")[0]);
    var option = {
        tooltip: {
            trigger: "axis",
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255, 255, 255, .5)",
                fontSize: "12",
            },
        },
        grid: {
            left: "10",
            right: "10",
            top: "30",
            bottom: "10",
            containLabel: true,
        },
        xAxis: [{
            type: "category",
            boundaryGap: false,
            data: [
                "00:00:00", "00:10:00", "00:20:00", "00:30:00", "00:40:00", "00:50:00", "01:00:00", "01:10:00", "01:20:00", "01:30:00", "01:40:00", "01:50:00", "02:00:00", "02:10:00", "02:20:00", "02:30:00", "02:40:00", "02:50:00", "03:00:00", "03:10:00", "03:20:00", "03:30:00", "03:40:00", "03:50:00", "04:00:00", "04:10:00", "04:20:00", "04:30:00", "04:40:00", "04:50:00", "05:00:00", "05:10:00", "05:20:00", "05:30:00", "05:40:00", "05:50:00", "06:00:00", "06:10:00", "06:20:00", "06:30:00", "06:40:00", "06:50:00", "07:00:00", "07:10:00", "07:20:00", "07:30:00", "07:40:00", "07:50:00", "08:00:00", "08:10:00", "08:20:00", "08:30:00", "08:40:00", "08:50:00", "09:00:00", "09:10:00", "09:20:00", "09:30:00", "09:40:00", "09:50:00", "10:00:00", "10:10:00", "10:20:00", "10:30:00", "10:40:00", "10:50:00", "11:00:00", "11:10:00", "11:20:00", "11:30:00", "11:40:00", "11:50:00", "12:00:00", "12:10:00", "12:20:00", "12:30:00", "12:40:00", "12:50:00", "13:00:00", "13:10:00", "13:20:00", "13:30:00", "13:40:00", "13:50:00", "14:00:00", "14:10:00", "14:20:00", "14:30:00", "14:40:00", "14:50:00", "15:00:00", "15:10:00", "15:20:00", "15:30:00", "15:40:00", "15:50:00", "16:00:00", "16:10:00", "16:20:00", "16:30:00", "16:40:00", "16:50:00", "17:00:00", "17:10:00", "17:20:00", "17:30:00", "17:40:00", "17:50:00", "18:00:00", "18:10:00", "18:20:00", "18:30:00", "18:40:00", "18:50:00", "19:00:00", "19:10:00", "19:20:00", "19:30:00", "19:40:00", "19:50:00", "20:00:00", "20:10:00", "20:20:00", "20:30:00", "20:40:00", "20:50:00", "21:00:00", "21:10:00", "21:20:00", "21:30:00", "21:40:00", "21:50:00", "22:00:00", "22:10:00", "22:20:00", "22:30:00", "22:40:00", "22:50:00", "23:00:00", "23:10:00", "23:20:00", "23:30:00", "23:40:00", "23:50:00"
            ],
            axisLabel: {
                textStyle: {
                    color: "rgba(255, 255, 255, .6)",
                    fontSize: 12,
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, .2)",
                    },
                },
            },
        },],
        yAxis: [{
            type: "value",
            // 去除刻度线
            axisTick: {
                show: false,
            },
            // y轴的线颜色
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, .1)",
                },
            },
            // 文字的颜色
            axisLabel: {
                textStyle: {
                    color: "rgba(255, 255, 255, .6)",
                    fontSize: 12,
                },
            },
            // 修改分割线的颜色
            splitLine: {
                lineStyle: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, .1)",
                    },
                },
            },
        },],
        series: [{
            name: "1号线",
            type: "line",
            smooth: true,
            // 单独修改当前线条的样式
            lineStyle: {
                color: "#0184d5",
                width: 2,
            },
            areaStyle: {
                // 渐变色，只需要复制即可
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, [{
                        offset: 0,
                        color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                    },
                    {
                        offset: 0.8,
                        color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                    },
                ],
                    false
                ),
                // 影子效果
                shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 设置拐点形状
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 刚开始时不显示拐点，鼠标经过才显示
            showSymbol: false,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
            },
            data: [
                256, 207, 201, 194, 211, 232, 171, 169, 120, 98, 60, 65, 43, 44, 39, 37, 22, 27, 36, 53, 36, 29, 33, 26, 39, 82, 310, 121, 77, 65, 32, 42, 60, 122, 1021, 9588, 23998, 36438, 38682, 45106, 57785, 76079, 96513, 122008, 158716, 194838, 241723, 285249, 312389, 343818, 333605, 322945, 305192, 254153, 216483, 196857, 182239, 162800, 154724, 146953, 139847, 140170, 137762, 132126, 132414, 139617, 133815, 129776, 131441, 134907, 138548, 140152, 136887, 148083, 149626, 148417, 153296, 151447, 154437, 156829, 152803, 149243, 150102, 152493, 157894, 156193, 158697, 151451, 149086, 155870, 153633, 160964, 165895, 173044, 173236, 177655, 177847, 169626, 181726, 183575, 192246, 194403, 198417, 220273, 265119, 255300, 256746, 302422, 279480, 248918, 267629, 241575, 210252, 195307, 177393, 162671, 167222, 162197, 152049, 144256, 134712, 139755, 151913, 151109, 142788, 137877, 130466, 128444, 131824, 116225, 109531, 103876, 91900, 101512, 101975, 69598, 63143, 43155, 23196, 17208, 7024, 3657, 1193, 424
            ],
        },
        {
            name: "2号线",
            type: "line",
            smooth: true,
            lineStyle: {
                normal: {
                    color: "#00d887",
                    width: 2,
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, [{
                            offset: 0,
                            color: "rgba(0, 216, 135, 0.4)",
                        },
                        {
                            offset: 0.8,
                            color: "rgba(0, 216, 135, 0.1)",
                        },
                    ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                },
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: [
                165, 125, 148, 143, 254, 228, 238, 312, 158, 103, 110, 56, 37, 106, 134, 73, 54, 51, 36, 27, 32, 15, 22, 18, 15, 26, 59, 309, 434, 43, 48, 28, 12, 48, 597, 3559, 10402, 15098, 19095, 24632, 33924, 44537, 59934, 74309, 97347, 130466, 167379, 204851, 239798, 257200, 247887, 227222, 208983, 170981, 135638, 119447, 108342, 98001, 90835, 83182, 77899, 74228, 73145, 70291, 69618, 67300, 65593, 65084, 66528, 66945, 68542, 69868, 70088, 72897, 76550, 77018, 78539, 78287, 77518, 77890, 78054, 76639, 75658, 74723, 73537, 74151, 75838, 74214, 75218, 74888, 74212, 76356, 79949, 79048, 79784, 80044, 79137, 81061, 86754, 87540, 91335, 99217, 103807, 126669, 163754, 150810, 158347, 192472, 169683, 153522, 164906, 143219, 121962, 109650, 95865, 87638, 83420, 75764, 71854, 69448, 67621, 73089, 75999, 72526, 71205, 73837, 66191, 65572, 67855, 59018, 53510, 50091, 41973, 41818, 40917, 31505, 25189, 21179, 13789, 8274, 5214, 2749, 1133, 464
            ],
        },
        {
            name: "4号线",
            type: "line",
            smooth: true,
            lineStyle: {
                normal: {
                    color: "#ff9f7f",
                    width: 2,
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, [{
                            offset: 0,
                            color: "rgba(255,159,127,0.4)",
                        },
                        {
                            offset: 0.8,
                            color: "rgba(255,159,127,0.1)",
                        },
                    ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                },
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: "#ff9f7f",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: [
                42, 47, 58, 84, 72, 106, 97, 73, 44, 54, 9, 19, 14, 12, 23, 14, 18, 15, 10, 13, 14, 10, 8, 7, 7, 12, 63, 59, 27, 23, 12, 4, 4, 23, 148, 1116, 2717, 4086, 5004, 6897, 8998, 11180, 14926, 19538, 25121, 29223, 34911, 44088, 52100, 61194, 58571, 56785, 55430, 45390, 36081, 30952, 27568, 24521, 23197, 21675, 20152, 20034, 19683, 19467, 19451, 19247, 18889, 18787, 19462, 20161, 21124, 21214, 21845, 23019, 24017, 23821, 23887, 24079, 23662, 24078, 24524, 23883, 24185, 24879, 24344, 24639, 24664, 24520, 24871, 25004, 24769, 25588, 27207, 27349, 27934, 27902, 28207, 29147, 31182, 31711, 34014, 36568, 35660, 49379, 72687, 60992, 69393, 99892, 78007, 69584, 82226, 65432, 53053, 47044, 40189, 37512, 35782, 32450, 29682, 29218, 29318, 32007, 33939, 31277, 30049, 32228, 28977, 29200, 29526, 24916, 25019, 23775, 19240, 20253, 19594, 13705, 11765, 8786, 5546, 2686, 1087, 261, 49, 40
            ],
        }

        ],
    };
    myChart.setOption(option);
    // 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    })

}
function char4() {
    var myChart = echarts.init($("#char4")[0]);
    var option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255, 255, 255, .5)",
                fontSize: "12",
            },
        },
        // 修改图标的大小
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true,
        },
        xAxis: [{
            type: "category",
            data: [
                '火车东站', '彭埠站', '客运中心站', '丰潭路站', '江陵路站', '龙翔桥站', '闸弄口站', '金沙湖站', '临平站', '凤起路站'
            ],
            axisTick: {
                alignWithLabel: true,
            },
            // 修改刻度标签相关样式
            axisLabel: {
                color: "rgba(255, 255, 255, .6)",
                fontSize: "12",
                interval: 0, //控制是否全部显示
            },
            // 不显示x轴的样式
            axisLine: {
                show: false,
            },
        },],
        yAxis: [{
            type: "value",
            // 修改刻度标签相关样式
            axisLabel: {
                color: "rgba(255, 255, 255, .6)",
                fontSize: "12",
            },
            // y轴坐标系
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, .1)",
                    width: 2,
                },
            },
            // y轴分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, .1)",
                },
            },
        },],
        series: [{
            name: "早高峰",
            type: "bar",
            // 修改柱子的宽度
            barWidth: "35%",
            data: [33394, 27059, 20264, 19749, 12711, 8914, 16819, 16738, 16674, 7780],
            itemStyle: {
                // 修改柱子的圆角
                barBorderRadius: 5,
            },
        },
        {
            name: "晚高峰",
            type: "bar",
            // 修改柱子的宽度
            barWidth: "35%",
            data: [35422, 27059, 20264, 19749, 24309, 26205, 16819, 16738, 16674, 23299],
            itemStyle: {
                // 修改柱子的圆角
                barBorderRadius: 5,
                color: "#00d887",
            },
        }
        ],
    };
    // 把配置项给实列对象
    myChart.setOption(option);
    // 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    })

}
function char5() {
    var myChart = echarts.init($("#char5")[0]);
    var dataAxis = ['火车东站',
 '龙翔桥站',
 '江陵路站',
 '城站',
 '凤起路站',
 '钱江路站',
 '古翠路站',
 '沈塘桥站',
 '丰潭路站',
 '庆春广场站',
 '景芳站',
 '市民中心站',
 '江锦路站',
 '城星路站',
 '南星桥站'];
var data = [2337627,
 1293521,
 824432,
 788045,
 719377,
 485508,
 442475,
 434567,
 420951,
 414341,
 407231,
 397074,
 346234,
 311228,
 264511];
var yMax = 500;
var dataShadow = [];

for (var i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
}

option = {
    xAxis: {
        data: dataAxis,
        axisLabel: {
            inside: false,
            textStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                color: 'rgba(0,0,0,0.05)'
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: dataShadow,
            animation: false
        },
        {
            type: 'bar',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
            data: data
        }
    ]
};

// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on('click', function (params) {
    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    myChart.dispatchAction({
        type: 'dataZoom',
        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    });
});
    myChart.setOption(option);
    window.addEventListener('resize', function () { myChart.resize(); })

}